<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>原始记录</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="attendance-source-record">
      <div class="source-record-btns">
        <search-btn-view btn-text="查询记录" :before-search="checkSearchValid" @before-open="resetSearch" @search="searchData">
          <template slot="append">
            <el-button size="medium" type="primary" @click="exportExcel(1)">原始模式导出excel</el-button>
            <el-button size="medium" type="primary" @click="exportExcel(2)">汇总模式导出excel</el-button>
            <el-button size="medium" type="primary" @click="lookInvalidRecord">查看无效记录</el-button>
            <el-button size="medium" type="primary" @click="lookVisitorRecord">查看访客记录</el-button>
            <el-button size="medium" type="primary" @click="lookVisitorTable">查看访客表</el-button>
          </template>
          <div slot="search-content">
            <search-form :search="search" :person-list="personList"></search-form>
          </div>
        </search-btn-view>
      </div>
      <div class="source-record-table-div">
        <el-table fit stripe border class="source-record-table" :data="records" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="姓名" prop="userName" key="userName" min-width="80px" align="center" fixed="left">
          </el-table-column>
          <el-table-column :resizable="false" label="部门" prop="deptName" key="deptName" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="车间" prop="workshopName" key="workshopName" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="编号" prop="userId" key="userId" min-width="60px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="工号" prop="workerNo" key="workerNo" min-width="60px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="考勤日期" key="baseCheckDate" width="135px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.baseCheckTime).format('YYYY-MM-DD dddd')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="考勤时间" key="baseCheckTime" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.baseCheckTime).format('HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="打卡时间" key="userCheckTime" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.userCheckTime).format('HH:mm')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="体温" prop="temperature" key="temperature" min-width="80px" align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="打卡结果" key="status" min-width="80px" align="center">
            <template slot-scope="scope">
              <span :class="scope.row.timeResult==='normal'?'status-normal':'status-abnormal'">
                {{statusList[scope.row.timeResult]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="体温结果" key="temperatureResult" min-width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.temperatureResult!==''" :class="'temperature-'+scope.row.temperatureResult">
                {{scope.row.temperatureResult==='normal'?"正常":"异常"}}
              </span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip :resizable="false" label="打卡地点" prop="location" key="location" :min-width="locationWidth"
            header-align="center"></el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog fullscreen class="dialog-fullscreen" :title="dialogTitle" :visible.sync="openDialog" @closed="dialogClosed">
      <div style="height:100%;overflow:auto">
        <template v-if="openDialog">
          <invalid-record v-if="dialogType==='invalidRecord'" :person-list="personList"></invalid-record>
          <visitor-record v-else-if="dialogType==='visitorRecord'"></visitor-record>
          <visitor-table v-else-if="dialogType==='visitorTable'"></visitor-table>
        </template>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/deptTransfer.css",
    "../components/css/deptPersonSelect.css",
    "../components/css/attendanceSearchForm.css",
    "./css/invalidRecord.css",
    "./css/visitorRecord.css",
    "./css/visitorTable.css"
  ], [
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/deptTransfer.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js"
  ]);

</script>
<script src="../components/deptPersonSelect.js"></script>
<script src="../components/attendanceSearchForm.js"></script>
<script src="./invalidRecord.js"></script>
<script src="./visitorRecord.js"></script>
<script src="./visitorTable.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        startDate: moment().startOf('month').valueOf(),
        endDate: moment().valueOf(),
        deptPerson: {
          depts: [],
          persons: []
        }
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        records: [],
        personList: [],
        locationWidth: '80px',
        openDialog: false,
        dialogType: '',
        dialogTitle: '',
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 30
        },
        statusList: {
          normal: "正常",
          late: "迟到",
          early: "早退"
        },
        moment: moment
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setPersonList(),
        this.setRecords(true)
      ]).then(function (res) {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setPersonList: function () {
        var self = this;
        return ajaxRequest('dingTalk/askForApprover').then(function (personList) {
          personList = _.map(personList, function (person) {
            return {
              deptId: person.deptId,
              deptName: person.deptName,
              userId: person.id,
              userName: person.personName
            };
          });
          self.personList = personList;
          return personList;
        });
      },

      setRecords: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var postData = {
          startDate: moment(search.startDate).format('YYYY-MM-DD'),
          endDate: moment(search.endDate).format('YYYY-MM-DD'),
        };

        var deptPerson = search.deptPerson;
        postData.deptIds = JSON.stringify(_.map(deptPerson.depts, 'id'));
        postData.userIds = JSON.stringify(_.map(deptPerson.persons, 'id'));

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData.start = start;
        postData.length = pageSize;

        var self = this;
        return ajaxRequest('dingTalk/queryAttendance', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var records = res.returnData;
          var hasLocation = false;
          for (var i = 0; i < records.length; i++) {
            var record = records[i];
            var location = record.location;
            var verifyMode = record.verifyMode;
            if (verifyMode === '-1') {
              record.location = '补卡';
            } else {
              if (SysUtil.isEmpty(location)) {
                record.location = '打卡机打卡';
              } else {
                if (!hasLocation) {
                  hasLocation = true;
                }
              }
            }

            var temperatureBasic = record.temperatureBasic;
            if (SysUtil.isEmpty(temperatureBasic)) {
              temperatureBasic = '';
            } else {
              temperatureBasic = Number(temperatureBasic);
            }
            var temperature = record.temperature;
            if (SysUtil.isEmpty(temperature)) {
              temperature = '';
            } else {
              temperature = Number(temperature);
            }

            var temperatureResult;
            if (temperature === '' || temperatureBasic === '') {
              temperatureResult = '';
            } else {
              temperatureResult = temperature <= temperatureBasic ? 'normal' : 'abnormal';
            }
            record.temperatureResult = temperatureResult;
          }

          if (hasLocation) {
            locationWidth = "350px";
          } else {
            locationWidth = "80px";
          }
          self.locationWidth = locationWidth;

          self.records = records;
          self.pagination.totalCount = res.iTotalRecords;
          return records;
        });
      },

      resetRecords: function (isSearch) {
        this.loading = true;
        var self = this;
        this.setRecords(isSearch).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      checkSearchValid: function () {
        var search = this.search;
        var startDate = search.startDate;
        var endDate = search.endDate;
        if (moment(startDate).add(1, 'month').isBefore(endDate, 'day')) {
          this.$alert('只能查询一个月以内的汇总数据', '信息');
          return false;
        }
        return true;
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.resetRecords(true);
      },

      pageChange: function () {
        this.resetRecords();
      },

      exportExcel: function (type) {
        var search = this.oldSearch;
        var postData = {
          startDate: moment(search.startDate).format('YYYY-MM-DD'),
          endDate: moment(search.endDate).format('YYYY-MM-DD')
        };
        var deptPerson = search.deptPerson;
        postData.deptIds = JSON.stringify(_.map(deptPerson.depts, 'id'));
        postData.userIds = JSON.stringify(_.map(deptPerson.persons, 'id'));
        var formParam = SysUtil.formatFormParam(postData);
        var basePath = SysUtil.getBasePath();

        var url;
        if (type === 1) {
          url = 'dingTalk/exprotExcelAttendSourceRecord';
        } else if (type === 2) {
          url = 'dingTalk/exprotExcelAttendSourceRecordTaiZhouBoShi';
        }

        var path = `${basePath}/${url}?${formParam}`;
        window.open(path);
      },

      lookInvalidRecord: function () {
        this.dialogTitle = '打卡无效记录';
        this.dialogType = 'invalidRecord';
        this.openDialog = true;
      },

      lookVisitorRecord: function () {
        this.dialogTitle = '访客记录';
        this.dialogType = 'visitorRecord';
        this.openDialog = true;
      },

      lookVisitorTable: function () {
        this.dialogTitle = '访客表';
        this.dialogType = 'visitorTable';
        this.openDialog = true;
      },

      dialogClosed: function () {
        this.dialogTitle = '';
        this.dialogType = '';
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: AttendanceSearchForm,
      InvalidRecord: InvalidRecord,
      VisitorRecord: VisitorRecord,
      VisitorTable: VisitorTable
    }
  });

</script>
<style>
  .attendance-source-record {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .attendance-source-record .source-record-table-div {
    flex: 1;
    overflow: auto;
  }

  .attendance-source-record .source-record-btns .el-button+.el-button {
    margin-left: 0;
  }

  .attendance-source-record .source-record-btns .el-button {
    margin-bottom: 5px;
  }

  .attendance-source-record .source-record-btns .search-btn-view {
    margin-bottom: 5px;
  }

  .attendance-source-record .source-record-table .status-normal {
    color: #4B8DFA;
  }

  .attendance-source-record .source-record-table .status-abnormal {
    color: #FF9533;
  }

  .attendance-source-record .source-record-table .temperature-normal {
    color: #4B8DFA;
  }

  .attendance-source-record .source-record-table .temperature-abnormal {
    color: #FF9533;
  }

</style>

</html>
